<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>wavesurfer test</title>
		<link rel="stylesheet" href="/static/iconfont/iconfont.css" />
		<link rel="stylesheet" href="/static/css/MyWavesurfer.css" />
		<script src='/static/js/wavesurfer.js'></script>
		<script src='/static/js/wavesurfer.regions.js'></script>
		<script src='/static/js/wavesurfer.timeline.js'></script>
		<script src='/static/js/MyWavesurfer.js'></script>
	</head>
	<body>
		<div id="ws-container2"></div>
		<script>
			var myWavesurfer = new MyWavesurfer({
				wavesurfer: {
					container: '#ws-container2',
					url: '/static/audio/demo.wav',
					waveColor: 'rgba(102,102,102,.6)',
					progressColor: '#3B8686',
					flagArr: [
						{time: '00:00:01', color: 'red'},
						{time: '00:10'}
					],
					speedArr: [0.5, 1, 2, 4],
					processOnHandler: function(params) {
						// 音频播放时，调用的方法
						// console.log("params", params);
					},
					wavesurferClickHandler: function(currentTime) {
						// 点击波形图时调用的方法
						console.log("wavesurferClickHandler", currentTime);
					}
				},
				region: {
					regionArr: [
						{ start: '00:00', end: '00:05', color: 'rgba(255, 0, 0, .6)' },
						{ start: '00:10', end: '00:14', color: 'rgba(0, 255, 0, .6)' },
						{ start: '00:00:17', end: '00:21' }
					]
				}
			});
			
			// myWavesurfer.setCurrentTime("00:03"); // 分:秒
			// myWavesurfer.setCurrentTime("00:00:03"); // 时:分:秒
			
		</script>
	</body>
</html>